<template>
  <div class="headTitle">
    <div class="back" @click="back"><van-icon name="arrow-left" /></div>
    <div class="caption">{{title}}</div>
  </div>
</template>

<script>
export default {
  name: 'Head',
  data(){
      return {
          title:'馨怡甜品，允您心怡'
      }
  },
  methods:{
    back(){
      this.$router.back();
    }
  }
}

import Vue from 'vue';
import { Icon } from 'vant';

Vue.use(Icon);
</script>

<style lang="less">
  .headTitle{
    height: 5rem;
    width: 100%;
    line-height: 5rem;
    border-bottom: .1rem solid #000;
    box-shadow: 0 .75rem .75rem -0.75rem rgb(18, 199, 231);
    font-size: 2rem;
    display: flex;
    background: white;

    .back{
      width: 5rem;
      line-height: 5.5rem;
      color: #333;
      text-align: center;
    }

    .caption{
      width: 20rem;
      margin-left: 3rem;
      font-size: 1.5rem;
      text-align: center;
    }
  }
</style>
